$spriteSrc:'/images/sprite.png?v=1491446937473';

$spriteWidth: 468px;
$spriteHeight: 419px;
$active: -184px -120px 53px 10px;
$add: -280px -378px 30px 30px;
$added: -230px -330px 35px 35px;
$card: -294px -264px 37px 32px;
$caret: -440px -275px 26px 17px;
$cd-clock: -440px 0px 28px 28px;
$checkbox-checked: -355px -330px 32px 32px;
$checkbox-default: -395px -330px 32px 32px;
$clock: -204px -378px 30px 30px;
$close-green: -354px -378px 28px 28px;
$close: -390px -378px 28px 28px;
$coupon: -189px -264px 48px 34px;
$date-slected: -132px -264px 49px 46px;
$delete: -440px -72px 25px 25px;
$donation-disabled: -186px -330px 36px 36px;
$donation: 0px -330px 40px 40px;
$exchange: -134px -148px 80px 56px;
$expired: -318px -122px 100px 84px;
$eye: -339px -264px 41px 26px;
$fork: -273px -330px 34px 34px;
$home-hover: -369px -214px 43px 41px;
$home: -134px -212px 43px 41px;
$left: -440px -105px 18px 30px;
$min-right: -440px -334px 14px 20px;
$minus: 0px -264px 58px 58px;
$my-voucher: -222px -148px 52px 52px;
$no-record: 0px -148px 126px 108px;
$nocoupon: 0px 0px 176px 140px;
$od-clock: -315px -330px 32px 32px;
$order-hover: 0px -378px 37px 41px;
$order: -87px -378px 33px 37px;
$orderno: -282px -148px 26px 32px;
$plus: -66px -264px 58px 58px;
$prompt: -318px -378px 28px 28px;
$purse: -440px -143px 22px 24px;
$question-gray: -128px -378px 30px 34px;
$question: -242px -378px 30px 30px;
$radio-checked: -140px -330px 38px 38px;
$radio-default: -94px -330px 38px 38px;
$refresh: -388px -264px 30px 26px;
$remind: -440px -175px 22px 24px;
$right: -440px -300px 17px 26px;
$selled: -184px 0px 126px 112px;
$smile: -318px 0px 114px 114px;
$switch-l: -440px -207px 17px 26px;
$switch-r: -440px -241px 17px 26px;
$transfer: -166px -378px 30px 34px;
$unbind: -48px -330px 38px 38px;
$unpay: -236px -212px 47px 36px;
$user-coupon: -245px -264px 41px 34px;
$user-hover: -185px -212px 43px 41px;
$user-order: -45px -378px 34px 40px;
$user: -318px -214px 43px 41px;
$yl-clock: -440px -36px 28px 28px;

@function px2rem ($px) {
  @if (type-of($px) == "number") {
    @return $px / 20px * 1rem;
  }
  @if (type-of($px) == "list") {
    @if (nth($px, 1) == 0 and nth($px, 2) != 0) {
      @return 0 nth($px, 2) / 20px * 1rem;
    } @else if (nth($px, 1) == 0 and nth($px, 2) == 0)  {
      @return 0 0;
    } @else if (nth($px, 1) != 0 and nth($px, 2) == 0) {
      @return nth($px, 1) / 20px * 1rem 0;
    } @else {
      @return nth($px, 1) / 20px *1rem nth($px, 2) / 20px * 1rem;
    }
  }
}

@mixin sprite-width($sprite) {
	width: px2rem(nth($sprite, 3));
}

@mixin sprite-height($sprite) {
	height: px2rem(nth($sprite, 4));
}

@mixin sprite-position($sprite) {
	$sprite-offset-x: px2rem(nth($sprite, 1));
	$sprite-offset-y: px2rem(nth($sprite, 2));
	background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
	@include sprite-position($sprite);
	@include sprite-width($sprite);
	@include sprite-height($sprite);
    background-image: url('#{$spriteSrc}');
	background-repeat: no-repeat;
	background-size: px2rem(($spriteWidth, $spriteHeight));
    display: inline-block;
}


@mixin mix-active() {
    @include sprite($active);
}
@mixin mix-add() {
    @include sprite($add);
}
@mixin mix-added() {
    @include sprite($added);
}
@mixin mix-card() {
    @include sprite($card);
}
@mixin mix-caret() {
    @include sprite($caret);
}
@mixin mix-cd-clock() {
    @include sprite($cd-clock);
}
@mixin mix-checkbox-checked() {
    @include sprite($checkbox-checked);
}
@mixin mix-checkbox-default() {
    @include sprite($checkbox-default);
}
@mixin mix-clock() {
    @include sprite($clock);
}
@mixin mix-close-green() {
    @include sprite($close-green);
}
@mixin mix-close() {
    @include sprite($close);
}
@mixin mix-coupon() {
    @include sprite($coupon);
}
@mixin mix-date-slected() {
    @include sprite($date-slected);
}
@mixin mix-delete() {
    @include sprite($delete);
}
@mixin mix-donation-disabled() {
    @include sprite($donation-disabled);
}
@mixin mix-donation() {
    @include sprite($donation);
}
@mixin mix-exchange() {
    @include sprite($exchange);
}
@mixin mix-expired() {
    @include sprite($expired);
}
@mixin mix-eye() {
    @include sprite($eye);
}
@mixin mix-fork() {
    @include sprite($fork);
}
@mixin mix-home-hover() {
    @include sprite($home-hover);
}
@mixin mix-home() {
    @include sprite($home);
}
@mixin mix-left() {
    @include sprite($left);
}
@mixin mix-min-right() {
    @include sprite($min-right);
}
@mixin mix-minus() {
    @include sprite($minus);
}
@mixin mix-my-voucher() {
    @include sprite($my-voucher);
}
@mixin mix-no-record() {
    @include sprite($no-record);
}
@mixin mix-nocoupon() {
    @include sprite($nocoupon);
}
@mixin mix-od-clock() {
    @include sprite($od-clock);
}
@mixin mix-order-hover() {
    @include sprite($order-hover);
}
@mixin mix-order() {
    @include sprite($order);
}
@mixin mix-orderno() {
    @include sprite($orderno);
}
@mixin mix-plus() {
    @include sprite($plus);
}
@mixin mix-prompt() {
    @include sprite($prompt);
}
@mixin mix-purse() {
    @include sprite($purse);
}
@mixin mix-question-gray() {
    @include sprite($question-gray);
}
@mixin mix-question() {
    @include sprite($question);
}
@mixin mix-radio-checked() {
    @include sprite($radio-checked);
}
@mixin mix-radio-default() {
    @include sprite($radio-default);
}
@mixin mix-refresh() {
    @include sprite($refresh);
}
@mixin mix-remind() {
    @include sprite($remind);
}
@mixin mix-right() {
    @include sprite($right);
}
@mixin mix-selled() {
    @include sprite($selled);
}
@mixin mix-smile() {
    @include sprite($smile);
}
@mixin mix-switch-l() {
    @include sprite($switch-l);
}
@mixin mix-switch-r() {
    @include sprite($switch-r);
}
@mixin mix-transfer() {
    @include sprite($transfer);
}
@mixin mix-unbind() {
    @include sprite($unbind);
}
@mixin mix-unpay() {
    @include sprite($unpay);
}
@mixin mix-user-coupon() {
    @include sprite($user-coupon);
}
@mixin mix-user-hover() {
    @include sprite($user-hover);
}
@mixin mix-user-order() {
    @include sprite($user-order);
}
@mixin mix-user() {
    @include sprite($user);
}
@mixin mix-yl-clock() {
    @include sprite($yl-clock);
}
